<template>
  <div class="changeBox">
    <span>{{ data.name }}</span>
    <div class="flex">
        <div class="colorPicker">
            <ColorPicker v-model:pureColor="props.data.selected" v-on:update:pureColor="handleColorChange"/>
        </div>
        <span v-on:click="colorValue">重置</span>
    </div>
  </div>
</template>

<script setup>
import { ColorPicker } from "vue3-colorpicker";
import "vue3-colorpicker/style.css";

const emit = defineEmits(['colorChnage'])
const props = defineProps(['data'])
const handleColorChange = (color)=>{
    emit('colorChnage',color)
}
</script>

<style scoped>
.changeBox{
    width: 100%;
    height: 5vh;
    font-size: 12px;
}

.changeBox>span{
        float: left;
        margin-left: 1vw;
    }

    .changeBox span{
        line-height: 30px;
    }

.changeBox>div{
    float: right;
}

.colorPicker{
    width: 50px;
    height: 24px;
    border: 1px solid #eee;
    padding: 3px;
    margin-right: 1vw;
}
</style>